<template>
    <div class="app-container">
        <!--工具栏-->
        <el-card
            shadow="hover"
            class="maBt15"
            v-if="checkPermission(['sms@index']) && $store.state.user.queryShow"
        >
             <el-form inline>
                <el-form-item :label="$t('Home.index41')">
                    <el-input
                        v-model="formInline.mobile"
                        clearable
                        :placeholder="$t('Home.index42')"
                        style="width: 150px"
                        class="filter-item"
                    />
                </el-form-item>
                <el-form-item :label="$t('Home.index43')">
                    <el-select
                        v-model="formInline.event"
                        :placeholder="$t('Home.index44')"
                        clearable
                        style="width: 150px"
                    >
                        <el-option
                        v-for="item in NoticeData"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-button class="filter-item" type="primary" @click="toQuery">{{$t("common.common4")}}</el-button>
             </el-form>
        </el-card>
        <el-card shadow="hover">
            <div slot="header" class="clearfix">
                <query-btn />
            </div>
            <el-table
                ref="table"
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                border
                highlight-current-row
                :max-height="$store.state.app.tableHeight"
                v-permission="['sms@index']"
            >
                <el-table-column prop="id" min-width="80" fixed="left" label="ID" />
                <el-table-column prop="account" min-width="150" :label="$t('Home.index46')">
                    <template slot-scope="scope">
                        {{scope.row.country_code}}
                    </template>
                </el-table-column>
                <el-table-column prop="account" min-width="150" :label="$t('Home.index41')">
                    <template slot-scope="scope">
                        {{scope.row.mobile}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="user_type"
                    min-width="120"
                    :label="$t('Home.index43')"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row.event | release(NoticeData)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    min-width="220"
                    :label="$t('Home.index45')"
                >  
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination
                v-permission="['sms@index']"
                :total="tableShow.listCount"
                :page.sync="tableShow.currentPage"
                :page-size.sync="tableShow.pageSize"
                @pageChange="getList"
            />
        </el-card>
    </div>
</template>
<script>
    import {NoticeData} from "@/assets/js/common";
    import { getCusList } from "@/api/sms/index";
    export default {
        data() {
            return {
                formInline: {
                    mobile:"",//通知账户
                    event:"",//模块名称
                },
                NoticeData,
                loading:false,
                tableShow: {
                    currentPage: 1,
                    pageSize: 10,
                    listCount: 0,
                },
                tableData: [],
            };
        },
        computed:{
            langSufx() {
                return this.$store.state.settings.langTail;
            },
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                this.loading = true;
                getCusList(
                    Object.assign({}, this.formInline, {
                        page: this.tableShow.currentPage,
                        limit: this.tableShow.pageSize,
                    })
                )
                .then((res) => {
                    if (res.code == 10000) {
                        this.tableData = res.data;
                        this.loading = false;
                        this.tableShow.listCount = res.count;
                    } else {
                        this.$message.error(res.message);
                    }
                })
                .catch((error) => {
                    this.$message.error(error.Error);
                });
            },
            toQuery(){
                this.tableShow.currentPage = 1;
                this.getList();
            }
        }
    }
</script>